<script lang="ts" setup>
import { ref } from "vue";
import NewsItem from "./NewsItem.vue";
import { newsList2 } from "../../../utils/ts/news";
import IndexFooter from "../Common/IndexFooter.vue";

const list = ref(newsList2);
</script>
<template>
  <div>
    <div class="w-full h-75 flex items-center justify-center relative blue" style="
        background: url(./index/news-bg.jpg) center center no-repeat,
          linear-gradient(
            90deg,
            rgba(0, 128, 255, 1) 0%,
            rgba(0, 68, 255, 1) 100%
          );
      ">
      <!-- <img
        src="/index/news-bg.jpg"
        alt=""
        class="absolute top-0 left-50/100 -translate-x-50/100 h-75"
      /> -->
      <p class="text-white text-3xl font-bold md:w-357 w-auto relative z-2 px-10">
        及时掌握行业一手讯息
      </p>
    </div>

    <div class="flex justify-center flex-col items-center bg-white">
      <div class="w-full max-w-375">
        <NewsItem v-for="(item, index) in list" :item="item" :key="'newsItem' + index" />
      </div>
    </div>
  </div>
  <IndexFooter />
</template>
<style lang="scss" scoped>
.blue {
  background: rgb(0, 128, 255);
  background: linear-gradient(90deg,
      rgba(0, 128, 255, 1) 0%,
      rgba(0, 68, 255, 1) 100%);
}
</style>
